<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style>
        .c1{
            /*浏览器默认字体大小:16px*/
            font-size: 32px;
            /*
                设置字体粗细程度:取值范围100-900,或者使用默认的几个单词
                normal:普通字体,取值为400
                bold:粗体,取值为700
            */
            font-weight: 100;
            font-family: '宋体';
            /*
                设置字体风格
                normal:普通
                italic:斜体
            */
            font-style: italic;
        }
        .c2{
            font-size: 16px;
            font-family: '楷体';
        }
        .c3{
            /*
                em:根据父元素字体大小进行倍数显示
                2em=父元素字体大小*2
                此时2em=16*2=32px
            */
            font-size: 2em;
        }
        .c4{
            font-size: 32px;
            font: italic bold 32px '楷体';
        }
        .c5{
            /*font-size: 0.5em;*/
            /*
                rem:根据浏览器默认字体大小进行倍数显示
                由于浏览器默认字体大小为16px
                因此2rem=2*16=32px
            */
            font-size: 2rem;
        }
    </style>
</head>
<body>
<div class="c1">这是c1</div>
<hr>
<div class="c2">
    这是c2
    <div class="c3">这是c2中的div</div>
    <span>这是c2中的span</span>
</div>
<hr>
<div class="c4">
    这是c4
    <div class="c5">这是c4中的div</div>
    <span>这是c4中的span</span>
</div>
</body>
</html>